/**
 * Dear programmer:
 * When I wrote this code, only god and I knew how it worked.
 * Now, only god knows it!
 *
 * @author: swx  Date: 2019-03-22 Time: 10:00
 *
 * 通用
 *
 */

import React, {Component} from 'react';
import {
    StyleSheet,
    View,
    Text,
    TouchableOpacity, Modal,ScrollView
} from 'react-native';
import PropTypes from 'prop-types';
import AntDesign from "react-native-vector-icons/AntDesign"
import {SCREEN_HEIGHT, SCREEN_WIDTH} from "../../constant/PHScreen";
import {dispatchOrder,completeOrder,deleteOrder,continueOrder} from "./Actions";
import {FetchStatus} from "../../configuration/RequestConfiguration";
import {ReturnStatus} from "../../configuration/ReturnStatus";
import {doDisplaySuccessMessage, doDisplayWarnMessage} from "../Message/Action";
import connect from "react-redux/es/connect/connect";
import {QmsRecordSummary} from "../../screen/job/JobScreen/Actions";
import {getDealPeople} from "../../screen/job/WorkOrder/DepartmentalRepairOrderScreen/DepartmentalRepairOrderDetailScreen/Actions";
import MaterialCommunityIcons from "react-native-vector-icons/MaterialCommunityIcons";
import {orderChangeState} from "../../screen/job/WorkOrder/DepartmentalRepairOrderScreen/DepartmentalRepairOrderDetailScreen/InputReason/Actions";

class BottomMenuView extends Component {

    static propTypes = {
        operation:PropTypes.string,
        dataSource:PropTypes.object,
        sn:PropTypes.string,
        goBack:PropTypes.func,
        toInputReason :PropTypes.func,
        toConsumables :PropTypes.func,
        toEditRemark:PropTypes.func,

    }

    static defaultProps = {
        operation: '',
    }

    //构造
    constructor(props) {
        super(props);
        this.state = {
            menuVisible:false, //菜单弹出modal
            operation:'',
            checkModalVisible:false,//确认modal
            dealPeopleArr:[],
            dealGroup:[],
            dealPeopleVisible:false,
            chooseGroup:'',//选中的组别
            chooseDealPeople:'',//选中的处理人
            dealPeople:[],
            dealPeopleName:[],
        };
    }

    componentWillReceiveProps(nextProps, nextContext): void {
        let {dispatch} = this.props;

        if (nextProps.onChangeOrder !== this.props.onChangeOrder && nextProps.onChangeOrder.fetchStatus === FetchStatus.Success) {
            if (nextProps.onChangeOrder.RETURN === ReturnStatus.Success) {
                doDisplaySuccessMessage(nextProps.onChangeOrder.MSG);

                let str = {};
                dispatch(QmsRecordSummary(JSON.stringify(str)));

                this.props.goBack();

            } else {
                dispatch(doDisplayWarnMessage(nextProps.onChangeOrder.MSG))
            }
        }

        if (nextProps.onDealPeople !== this.props.onDealPeople && nextProps.onDealPeople.fetchStatus === FetchStatus.Success) {
            if (nextProps.onDealPeople.RETURN === ReturnStatus.Success) {
                let defaultInfo = nextProps.onDealPeople.DATA;
                let dealGroup = [];
                console.log(JSON.stringify(defaultInfo));
                defaultInfo.map((item, index) => {
                    if(dealGroup.indexOf(item.depart_name)<0){
                        dealGroup.push(item.depart_name)
                    }
                });
                this.setState({
                    dealPeopleArr: defaultInfo,
                    dealGroup:dealGroup
                });
            } else {
                dispatch(doDisplayWarnMessage(nextProps.onDealPeople.MSG))
            }
        }

        if (nextProps.onOrderChangeStateMsg !== this.props.onOrderChangeStateMsg && nextProps.onOrderChangeStateMsg.fetchStatus === FetchStatus.Success) {
            if (nextProps.onOrderChangeStateMsg.RETURN === ReturnStatus.Success) {
                doDisplaySuccessMessage(nextProps.onOrderChangeStateMsg.MSG);

                let str = {};
                dispatch(QmsRecordSummary(JSON.stringify(str)));

                this.props.goBack();
            } else {
                dispatch(doDisplayWarnMessage(nextProps.onOrderChangeStateMsg.MSG))
            }
        }
    }

    // 组件渲染后调用
    componentDidMount() {
        // this.props.navigation.navigate('MainNavigator');
        let {dispatch} = this.props;
        let str = '{}';
        dispatch(getDealPeople(JSON.stringify(str)))
    }

    render() {
        return (
            <View style={styles.bodyBottom}>

                {this.leftButton()}

                {this.rightButton()}

                {/*...菜单*/}
                <Modal
                    visible={this.state.menuVisible}
                    //显示是的动画默认none
                    //从下面向上滑动slide
                    //慢慢显示fade
                    animationType = {'none'}
                    //是否透明默认是不透明 false
                    transparent = {true}
                    //关闭时调用
                    onRequestClose={()=> this.onRequestClose()}
                >
                    <TouchableOpacity style={{flex: 1}} activeOpacity={1}  onPress={()=>{
                        this.onRequestClose();
                    }}>
                        <View style={styles.modalContainer}>
                            <View style={styles.modalBox} >
                                {
                                    this.props.operation.split(',').map((item, index) => {
                                        return this._leftButtomRender(item, index)
                                    })
                                }
                            </View>
                        </View>
                    </TouchableOpacity>
                </Modal>

                {/*确认模态*/}
                <Modal visible={this.state.checkModalVisible} animationType = {'none'} transparent = {true} onRequestClose={()=> this.onRequestClose()} >
                    <TouchableOpacity style={{flex: 1}} activeOpacity={1}  onPress={()=>{
                        this.onRequestClose();
                    }}>
                        <View style={styles.checkmodalContainer} >
                            <View style={styles.checkModalBody}>
                                <View style={styles.checkModalHeader}>
                                    <Text style={styles.checkModalHeaderText}>
                                        确认{this.state.operation}？
                                    </Text>
                                </View>
                                <View style={styles.checkModalCenter}>
                                    <TouchableOpacity  style={styles.checkModalCenterLeft} onPress={()=>{
                                        this.setState({
                                            checkModalVisible:false,
                                        })
                                    }}>
                                        <Text style={{color:'black',fontSize:20}}>
                                            取消
                                        </Text>
                                    </TouchableOpacity>
                                    <TouchableOpacity style={styles.checkModalCenterRight} onPress={()=>{
                                        this.setState({
                                            checkModalVisible:false,
                                        })
                                        this._onSubmitClick(this.state.operation)
                                    }}>
                                        <Text style={{color:'white',fontSize:20}}>
                                            {this.state.operation}
                                        </Text>
                                    </TouchableOpacity>
                                </View>
                            </View>
                        </View>
                    </TouchableOpacity>
                </Modal>

                {/*选择处理人*/}
                <Modal visible={this.state.dealPeopleVisible} animationType = {'none'} transparent = {true} onRequestClose={()=> this.onRequestClose()}>
                    <TouchableOpacity style={{flex: 1}} activeOpacity={1}  onPress={()=>{
                    }}>
                        <View style={styles.peopleModalContainer}>
                            <View style={styles.peopleModalBox} >
                                <View style={styles.modalTitle}>
                                    <View style={styles.modalCancel}>
                                        <Text style={styles.modalCancelText} onPress={()=>{
                                            this.setState({dealPeopleVisible: false})
                                        }}>
                                            取消
                                        </Text>
                                    </View>
                                    <View>
                                        <Text style={styles.PeopleModalTitleText}>
                                            {
                                                (this.state.dealPeople.length>0?'已选择：'+this.state.dealPeople.length+'人':'选择处理人')
                                            }
                                        </Text>
                                    </View>
                                    <View style={styles.modalCheck}>
                                        <Text style={styles.modalCheckText} onPress={()=>{
                                            this.setState({dealPeopleVisible: false})
                                            console.log(JSON.stringify(this.state.dealPeople))

                                            let work_userid_list = this.state.dealPeople.join(',');
                                            this._onClickDispatch(work_userid_list)
                                        }}>
                                            确定
                                        </Text>
                                    </View>
                                </View>
                                <View style={styles.modalBody}>
                                    <ScrollView showsVerticalScrollIndicator={false} style={styles.modalBodyLeft}>
                                        {
                                            this.state.dealGroup.map((item, index) => {
                                                return this._renderRole(item, index)
                                            })
                                        }
                                    </ScrollView>
                                    <ScrollView showsVerticalScrollIndicator={false} style={styles.modalBodyRight}>
                                        {
                                            this.state.dealPeopleArr.map((item, index) => {
                                                return this._renderDealPeopleArr(item, index)
                                            })
                                        }
                                    </ScrollView>
                                </View>
                            </View>
                        </View>
                    </TouchableOpacity>
                </Modal>
            </View>
        )
    }

    onRequestClose(){
        this.setState({
            menuVisible: false,
            checkModalVisible:false,
            dealPeopleVisible: false,
        })
    }

    _leftButtomRender=(item, index)=>{
        let modalCenterOrBottom = '';
        if(index===this.props.operation.split(',').length-1){
            modalCenterOrBottom = 'modalBottom'
        }else{
            modalCenterOrBottom = 'modalCenter'
        }
        switch (item) {
            case '挂起': {
                return (
                    <TouchableOpacity key={index} style={{flex: 1}} activeOpacity={1} onPress={()=>{
                        this.onRequestClose();
                        this.props.toInputReason('挂起','QmsRepairRecordPause');
                    }}>
                        <View style={styles[modalCenterOrBottom]} >
                            <Text style={styles.modalTitleText} >
                                挂起
                            </Text>
                        </View>
                    </TouchableOpacity>
                )
            }
            case '耗材': {
                return (
                    <TouchableOpacity key={index} style={{flex: 1}} activeOpacity={1} onPress={()=>{
                        this.onRequestClose();
                        this.props.toConsumables();
                    }}>
                        <View style={styles[modalCenterOrBottom]}>
                            <Text style={styles.modalTitleText}>
                                耗材记录
                            </Text>
                        </View>
                    </TouchableOpacity>
                )
            }
            case '更换处理人': {
                return (
                    <TouchableOpacity key={index} style={{flex: 1}} activeOpacity={1} onPress={()=>{
                        this.onRequestClose();
                        this.setState({dealPeopleVisible:true})
                    }}>
                        <View style={styles[modalCenterOrBottom]} >
                            <Text style={styles.modalTitleText} >
                                更换处理人
                            </Text>
                        </View>
                    </TouchableOpacity>
                )
            }
            case '拒绝': {
                return (
                    <TouchableOpacity key={index} style={{flex: 1}} activeOpacity={1} onPress={()=>{
                        this.onRequestClose();
                        this.props.toInputReason('拒绝','QmsRepairRecordRefuse');
                    }}>
                        <View style={styles[modalCenterOrBottom]} >
                            <Text style={styles.modalTitleText} >
                                拒绝工单
                            </Text>
                        </View>
                    </TouchableOpacity>
                )
            }
            case '退回': {
                return (
                    <TouchableOpacity key={index} style={{flex: 1}} activeOpacity={1} onPress={()=>{
                        this.onRequestClose();
                        this.props.toInputReason('退回下单部门','QmsRepairRecordSendBack');
                    }}>
                        <View style={styles[modalCenterOrBottom]} >
                            <Text style={styles.modalTitleText} >
                                退回下单部门
                            </Text>
                        </View>
                    </TouchableOpacity>
                )
            }
            case '备注': {
                return (
                    <TouchableOpacity key={index} style={{flex: 1}} activeOpacity={1} onPress={()=>{
                        this.onRequestClose();
                        this.props.toEditRemark();
                    }}>
                        <View style={styles[modalCenterOrBottom]} >
                            <Text style={styles.modalTitleText} >
                                修改备注
                            </Text>
                        </View>
                    </TouchableOpacity>
                )
            }
            case '编辑': {
                return (
                    <TouchableOpacity key={index} style={{flex: 1}} activeOpacity={1} onPress={()=>{
                        this.onRequestClose();
                    }}>
                        <View style={styles[modalCenterOrBottom]} >
                            <Text style={styles.modalTitleText} >
                                编辑
                            </Text>
                        </View>
                    </TouchableOpacity>
                )
            }
            case '无法处理': {
                return (
                    <TouchableOpacity key={index} style={{flex: 1}} activeOpacity={1} onPress={()=>{
                        this.onRequestClose();
                        this.props.toInputReason('无法处理','QmsRepairRecordUnable');
                    }}>
                        <View style={styles[modalCenterOrBottom]} >
                            <Text style={styles.modalTitleText} >
                                无法处理
                            </Text>
                        </View>
                    </TouchableOpacity>
                )
            }
        }
    };

    leftButton=()=>{
        if(this.props.operation.split(',').length>1){
            return(
                <TouchableOpacity activeOpacity={0.8} onPress={()=>{
                    this.setState({
                        menuVisible:true,
                    })
                }}>
                    <View style={styles.bodyBottomLeft}>
                        <Text style={styles.cellTitleText}>
                            <AntDesign name={'ellipsis1'} size={25} style={{color: 'white'}}/>
                        </Text>
                    </View>
                </TouchableOpacity>
            )
        }else{
            return(
                <View style={{width:SCREEN_WIDTH/8}}>
                </View>
            )
        }
    };

    rightButton=()=>{
        let _this = this;
        if(this.props.operation.split(',').indexOf('完成')>-1){
            return(
                <TouchableOpacity activeOpacity={0.8} onPress={()=>{
                    this.setState({
                        operation:"完成",
                        checkModalVisible:true,
                    })
                }}>
                    <View style={styles.bodyBottomRight}>
                        <Text style={styles.cellTitleText}>
                            完成
                        </Text>
                    </View>
                </TouchableOpacity>
            )
        }else if(this.props.operation.split(',').indexOf('派工')>-1){
            return(
                <View style={styles.bodyBottomRightDouble}>
                    <TouchableOpacity activeOpacity={0.8} onPress={()=>{
                        let work_userid_list = this.props.dataSource.dealPeople.join(',');
                        this._onClickDispatch(work_userid_list)
                    }}>
                        <View style={styles.bodyBottomRightL}>
                            <Text style={styles.cellTitleText}>
                                派工其他人
                            </Text>
                        </View>
                    </TouchableOpacity>
                    <TouchableOpacity activeOpacity={0.8} onPress={()=>{
                        let work_userid_list = this.props.onUserSession.userid;
                        this._onClickDispatch(work_userid_list)
                    }}>
                        <View style={styles.bodyBottomRightR}>
                            <Text style={styles.cellTitleText}>
                                派工给我
                            </Text>
                        </View>
                    </TouchableOpacity>
                </View>
            )
        }else if(this.props.operation.split(',').indexOf('删除')>-1){
            return(
                <TouchableOpacity activeOpacity={0.8} onPress={()=>{
                    this.setState({
                        operation:"删除",
                        checkModalVisible:true,
                    })
                }}>
                    <View style={styles.bodyBottomRight}>
                        <Text style={styles.cellTitleText}>
                            删除
                        </Text>
                    </View>
                </TouchableOpacity>
            )
        }else if(this.props.operation.split(',').indexOf('重新开始')>-1){
            return(
                <TouchableOpacity activeOpacity={0.8} onPress={()=>{
                }}>
                    <View style={styles.bodyBottomRight}>
                        <Text style={styles.cellTitleText}>
                            重新开始
                        </Text>
                    </View>
                </TouchableOpacity>
            )
        }else if(this.props.operation.split(',').indexOf('继续处理')>-1){
            return(
                <TouchableOpacity activeOpacity={0.8} onPress={()=>{
                    this.setState({
                        operation:"继续处理",
                        checkModalVisible:true,
                    })
                }}>
                    <View style={styles.bodyBottomRight}>
                        <Text style={styles.cellTitleText}>
                            继续处理
                        </Text>
                    </View>
                </TouchableOpacity>
            )
        }else if(this.props.operation.split(',').indexOf('验收')>-1){
            return(
                <View style={styles.bodyBottomRightDouble}>
                    <TouchableOpacity activeOpacity={0.8} onPress={()=>{
                        let {dispatch} = _this.props;
                        let str = {"qms_repair":{"sn":_this.props.sn}};
                        let procedure = 'QmsRepairRecordReviewSuccess';
                        dispatch(orderChangeState(JSON.stringify(str),procedure));
                    }}>
                        <View style={styles.bodyBottomRightL}>
                            <Text style={styles.cellTitleText}>
                                验收通过
                            </Text>
                        </View>
                    </TouchableOpacity>
                    <TouchableOpacity activeOpacity={0.8} onPress={()=>{
                        this.onRequestClose();
                        this.props.toInputReason('退回','QmsRepairRecordReviewFail');
                    }}>
                        <View style={styles.bodyBottomRightR}>
                            <Text style={styles.cellTitleText}>
                                退回
                            </Text>
                        </View>
                    </TouchableOpacity>
                </View>
            )
        }else if(this.props.operation.split(',').indexOf('复核')>-1){
            return(
                <View style={styles.bodyBottomRightDouble}>
                    <TouchableOpacity activeOpacity={0.8} onPress={()=>{
                        let {dispatch} = _this.props;
                        let str = {"qms_repair":{"sn":_this.props.sn}};
                        let procedure = 'QmsRepairRecordSecondReviewSuccess';
                        dispatch(orderChangeState(JSON.stringify(str),procedure));
                    }}>
                        <View style={styles.bodyBottomRightL}>
                            <Text style={styles.cellTitleText}>
                                复核通过
                            </Text>
                        </View>
                    </TouchableOpacity>
                    <TouchableOpacity activeOpacity={0.8} onPress={()=>{
                        this.onRequestClose();
                        this.props.toInputReason('退回','QmsRepairRecordSecondReviewFail');
                    }}>
                        <View style={styles.bodyBottomRightR}>
                            <Text style={styles.cellTitleText}>
                                退回
                            </Text>
                        </View>
                    </TouchableOpacity>
                </View>
            )
        }else if(this.props.operation.split(',').indexOf('审批')>-1){
            return(
                <TouchableOpacity activeOpacity={0.8} onPress={()=>{
                }}>
                    <View style={styles.bodyBottomRight}>
                        <Text style={styles.cellTitleText}>
                            审批
                        </Text>
                    </View>
                </TouchableOpacity>
            )
        }else if(this.props.operation.split(',').indexOf('备注')>-1){
            return(
                <TouchableOpacity activeOpacity={0.8} onPress={()=>{
                    this.onRequestClose();
                    this.props.toEditRemark();
                }}>
                    <View style={styles.bodyBottomRight}>
                        <Text style={styles.cellTitleText}>
                            修改备注
                        </Text>
                    </View>
                </TouchableOpacity>
            )
        }
    };

    //派工
    _onClickDispatch=(work_userid_list)=>{
        let {dispatch} = this.props;
        let str = {"qms_repair":{"sn":this.props.sn,"work_userid_list":work_userid_list}};
        dispatch(dispatchOrder(JSON.stringify(str)))
    };

    //完成
    _onSubmitClick = (value)=>{
        let {dispatch} = this.props;
        switch (value) {
            case '完成':{
                let str = {"qms_repair":{"sn":this.props.sn}};
                dispatch(completeOrder(JSON.stringify(str)));
                break;
            }
            case '删除':{
                let str = {"qms_repair":{"sn":this.props.sn}};
                dispatch(deleteOrder(JSON.stringify(str)));
                break;
            }
            case '继续处理':{
                let str = {"qms_repair":{"sn":this.props.sn}};
                dispatch(continueOrder(JSON.stringify(str)));
                break;
            }
        }

    }

    //分组循环
    _renderRole = (item, index) => {
        if(this.state.chooseGroup===""){
            this.state.chooseGroup=item
        }
        return(
            <TouchableOpacity key={index} activeOpacity={1} onPress={()=>{
                this.setState({chooseGroup:item})
            }}>
                {this.leftBoxStyle(item)}
            </TouchableOpacity>
        )
    };

    //判断选中分组
    leftBoxStyle(item){
        if(this.state.chooseGroup===item){
            return(
                <View style={styles.leftBoxChoose}>
                    <Text style={styles.leftText}>
                        {item}
                    </Text>
                </View>
            )
        }else{
            return(
                <View style={styles.leftBox}>
                    <Text style={styles.leftText}>
                        {item}
                    </Text>
                </View>
            )
        }
    }

    //处理人循环
    _renderDealPeopleArr = (item, index) => {
        if(item.depart_name===this.state.chooseGroup){
            return(
                <TouchableOpacity key={index} activeOpacity={1} onPress={()=>{
                    if(this.state.dealPeople.indexOf(item.userid)>=0){
                        this.state.dealPeople.splice(this.state.dealPeople.indexOf(item.userid),1);
                        this.state.dealPeopleName.splice(this.state.dealPeopleName.indexOf(item.username),1);
                    }else{
                        this.state.dealPeople.push(item.userid);
                        this.state.dealPeopleName.push(item.username);
                    }
                    this.setState({
                        dealPeople : this.state.dealPeople,
                        dealPeopleName : this.state.dealPeopleName
                    })
                }}>
                    {this.rightBoxStyle(item)}
                </TouchableOpacity>
            )
        }
    }

    rightBoxStyle(item){
        if(this.state.dealPeople.indexOf(item.userid)>=0){
            return(
                <View style={styles.rightBox}>
                    <MaterialCommunityIcons name={'radiobox-marked'} size={25} color={'#1f60ff'} />
                    <Text style={styles.rightTextChoose}>
                        {item.username}
                    </Text>
                </View>
            )
        }else{
            return(
                <View style={styles.rightBox}>
                    <MaterialCommunityIcons name={'radiobox-blank'} size={25} />
                    <Text style={styles.rightText}>
                        {item.username}
                    </Text>
                </View>
            )
        }
    }
}


const props = state => {
    return {
        onChangeOrder: state.onChangeOrder,
        onUserSession:state.onUserSession,
        onDealPeople:state.onDealPeople,
        onOrderChangeStateMsg:state.onOrderChangeStateMsg
    }
}

export default BottomMenuView = connect(props)(BottomMenuView);


const styles = StyleSheet.create({

    bodyBottom:{
        height:40,
        width:SCREEN_WIDTH,
        bottom:5,
        alignItems:'center',
        justifyContent:'flex-start',
        position:'absolute',
        backgroundColor:'#ffffff',
        flexDirection:'row'
    },

    bodyBottomLeft:{
        marginLeft:SCREEN_WIDTH/24,
        marginRight:SCREEN_WIDTH/24,
        width:SCREEN_WIDTH/8,
        backgroundColor:'#6f6f6f',
        height:40,
        borderRadius: 5,
        alignItems:'center',
        justifyContent: 'center',
    },

    bodyBottomRight:{
        width:SCREEN_WIDTH*6/8,
        backgroundColor:'#1f60ff',
        height:40,
        borderRadius: 5,
        alignItems:'center',
        justifyContent: 'center',
    },

    bodyBottomRightDouble:{
        width:SCREEN_WIDTH*6/8,
        height:40,
        flexDirection: 'row',
        alignItems:'center',
        justifyContent: 'center',
    },

    bodyBottomRightL:{
        width:SCREEN_WIDTH*1/3,
        backgroundColor:'#1f60ff',
        height:40,
        borderRadius: 5,
        alignItems:'center',
        justifyContent: 'center',
    },

    bodyBottomRightR:{
        marginLeft:SCREEN_WIDTH/24,
        width:SCREEN_WIDTH*1/3,
        backgroundColor:'#1f60ff',
        height:40,
        borderRadius: 5,
        alignItems:'center',
        justifyContent: 'center',
    },

    cellTitleText: {
        fontSize: 20,
        color: '#ffffff',
        marginBottom: 1,
        textAlign:'center',
    },

    modalContainer: {
        flex: 1,
        backgroundColor: 'rgba(0, 0, 0, 0)'
    },

    modalBox:{
        alignItems:'center',
        backgroundColor:'white',
        width: 120,
        borderRadius:10,
        borderWidth:1,
        borderColor:'#b2b2b2',
        bottom: 55,
        position:'absolute',
        marginLeft:SCREEN_WIDTH/24,
    },

    modalTitleText:{
        fontSize:17,
        color:'black',
    },

    modalCenter:{
        borderBottomColor:'#b2b2b2',
        borderBottomWidth:1,
        height:40,
        width:120,
        alignItems:'center',
        justifyContent:'center',
    },

    modalBottom:{
        height:40,
        width:120,
        alignItems:'center',
        justifyContent:'center',
    },

    checkmodalContainer:{
        flex: 1,
        backgroundColor: 'rgba(0, 0, 0, 0.5)'
    },

    checkModalBody:{
        top:(SCREEN_HEIGHT-100)/2,
        height: 100,
        left:40,
        width:SCREEN_WIDTH - 80,
        backgroundColor:'white',
        borderRadius:3,
    },

    checkModalHeaderText: {
        fontSize: 22,
        color: '#2f67ff'
    },

    checkModalHeader: {
        height: 50,
        justifyContent: 'center',
        alignItems: 'center',
    },

    checkModalCenter:{
        height: 50,
        justifyContent: 'center',
        alignItems: 'center',
        flexDirection:'row'
    },

    checkModalCenterLeft:{
        flex:1,
        height: 44,
        margin: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor:'#cecece'
    },

    checkModalCenterRight:{
        flex:1,
        height: 44,
        margin: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor:'#2f67ff'
    },


    peopleModalContainer: {
        flex: 1,
        backgroundColor: 'rgba(0, 0, 0, 0.5)'
    },

    peopleModalBox:{
        alignItems:'center',
        height:300,
        backgroundColor:'white',
        width: SCREEN_WIDTH,
        bottom:0,
        position:'absolute',
    },

    modalTitle:{
        borderBottomColor:'#b2b2b2',
        borderBottomWidth:1,
        height:49,
        width:SCREEN_WIDTH,
        alignItems:'center',
        justifyContent:'center',
        flexDirection:'row',
    },

    PeopleModalTitleText:{
        fontSize:20,
        color:'black',
    },

    modalCheck:{
        position:'absolute',
        right: 10,
    },

    modalCheckText:{
        fontSize:17,
        color:'#1f60ff',
    },

    modalCancel:{
        position:'absolute',
        left: 10,
    },

    modalCancelText:{
        fontSize:17,
        color:'#CCCCCC',
    },

    modalBody:{
        flexDirection:'row',
        width:SCREEN_WIDTH,
        height:250,
    },

    modalBodyLeft:{
        width:SCREEN_WIDTH*2/5,
        flexDirection:'column',
        backgroundColor:'#e4e4e4',
    },

    modalBodyRight:{
        width:SCREEN_WIDTH*3/5,
        flexDirection:'column',
    },

    leftBox:{
        justifyContent: 'center',
        alignItems: 'center',
        height:40,
        backgroundColor:'#e4e4e4'
    },

    leftBoxChoose:{
        justifyContent: 'center',
        alignItems: 'center',
        height:40,
        backgroundColor:'#ffffff'
    },

    leftText:{
        fontSize:17,
        color:'black',
    },

    rightBox:{
        alignItems: 'flex-start',
        backgroundColor:'#ffffff',
        minHeight: 40,
        marginLeft:30,
        paddingTop:10,
        flexDirection:'row',
    },

    rightBoxChoose:{
        alignItems: 'flex-start',
        backgroundColor:'#ffffff',
        minHeight: 40,
        marginLeft:30,
        paddingTop:15,
        flexDirection:'row',
    },

    rightText:{
        fontSize:17,
        color:'black',
    },

    rightTextChoose:{
        fontSize:17,
        color:'#1f60ff',
    },
})